import cao from "./styles/cakeOrder.module.css"
import classNames from "classnames"
import { useState } from "react"
import { useEffect } from "react"

let img_lis = [
    {url:"https://jimucake.com/views/default/skin/default/images/images/jia_ico.jpg",
     name:""
    },
    {url:"https://jimucake.com/pic/thumb/img/upload@_@2016@_@12@_@06@_@20161206150154258.jpg/w/186/h/186",
     name:"选配餐具\n¥4.00"
    },
    {url:"https://jimucake.com/pic/thumb/img/upload@_@2024@_@05@_@07@_@20240507170112874.jpg/w/186/h/186",
     name:"JIMUU礼盒\n¥20.00"
    },
    {url:"https://jimucake.com/pic/thumb/img/upload@_@2022@_@11@_@14@_@20221114105834158.jpg/w/186/h/186",
     name:"海马刀钳\n¥29.00"
    },
    {url:"https://jimucake.com/views/default/skin/default/images/images/dengyu_ico.jpg",
     name:""
    }
]

const CakeOrder = (props) => {
    const cake_ = props.cake
    const [cake,setCake] = useState([])
    const [price_,setPrice] = useState(0)
    useEffect(()=>{
        setCake([cake_,...img_lis])
        setPrice(Number(cake_.name.split("¥")[1]))
    },[cake_])

    return (
        <div className={cao.app}>
            <div className={cao.imgs}>
                {
                    cake.map((item,index) => (
                        <div key={index} className={cao.im}>
                            <div className={classNames(cao.img,{[cao.img_m]:index===1 || index===5})}>
                                <img src={item.url} className={cao.img_} alt=""/>
                            </div>
                            {
                                item.name !== "" ? 
                                <div className={cao.name}>
                                    <pre>
                                        {item.name}
                                    </pre>
                                </div>            :
                                <>
                                </>
                            }
                        </div>
                    ))
                }
            </div>
            <div className={cao.price}>
                <div>组合价:¥{price_ + 53}<span>.00</span></div>
                <div>配件:3件配件</div>
            </div>
        </div>
    )
}

export default CakeOrder